<template>
  <a-layout
    id="components-layout-demo-custom-trigger"
    style="height: 100vh"
    @click.native="visible = false"
  >
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      :style="{ height: '100vh', background: '#f0f0f033' }"
    >
      <div class="logo"></div>
      <a-menu
        style=" background: #f0f0f033"
        mode="inline"
        :default-selected-keys="['music']"
      >
        <a-menu-item-group key="g1" title="在线音乐">
          <a-menu-item key="music" router @click="$router.push('/musiccenter')">
            <a-icon type="customer-service" />
            <span>
              音乐馆
            </span>
          </a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group key="g2" title="我的音乐">
          <a-menu-item
            v-for="item in items"
            :key="item.text"
            router
            @click="$router.push(`${item.link}`)"
          >
            <a-icon :type="item.icon" />
            <span>
              {{ item.text }}
            </span>
          </a-menu-item>
        </a-menu-item-group>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- 最顶部 -->
      <a-layout-header style="background: #f5f5f5; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{
          marginBotton: '100px',
          overflowY: 'scroll'
        }"
      >
        <nuxt-child />
      </a-layout-content>
      <!--      播放条-->
      <a-layout-footer class="xjwfooter">
        <player>
          <template #footer>
            <music-drawer
              v-model="visible"
              class="usermessage"
              @click.stop="showDrawer"
            >
              <a-icon
                class="comicon"
                title="播放队列"
                type="menu-fold"
                @click.stop="showDrawer"
            /></music-drawer>
          </template>
        </player>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import MusicDrawer from '~/components/MusicDrawer'
import Player from '~/components/Player'
export default {
  components: {
    MusicDrawer,
    Player
  },
  data() {
    return {
      collapsed: false,
      visible: false,
      items: [
        { icon: 'heart', text: '我喜欢', link: '/like' },
        { icon: 'folder', text: '本地和下载', link: '/' },
        { icon: 'dashboard', text: '播放历史', link: '/like' }
      ]
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    }
  }
}
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  color: black;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.xjwfooter {
  background-color: white;
  border-top: 2px solid rgb(238, 238, 238);
  width: 100%;
  line-height: 64px;
  padding: 0px 30px;
  padding-right: 50px;
}
.list-title {
  font-size: 25px;
  /*font-weight: bold;*/
}
.activeicon {
  font-size: 25px;
  line-height: 5px;
  padding: 0 5px;
  cursor: pointer;
  color: #1890ff;
}
.closediv {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  margin: 0px 5%;
  padding: 20px 5px;
  border-top: 1px solid #e8e8e8;
  text-align: right;
  background: #fff;
}
.drawerclose:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>
